<script setup>
// 1. 导入reactive函数
import {reactive} from 'vue'
console.log('我是setup');
let message = '学vue3了'
console.log('我是this,他们都不要我了', this)
// 使用的时候调用函数
const state = reactive({
  age: '36, 双倍水嫩'
})
// setup中的数据没有响应式
// 想要有响应式 得使用reactive 或ref
// let age = '36, 双倍水嫩'
const say = () => {
  let message1 = 'vue3真简单'
  console.log('会说话,下雨会往家跑');
}
const changeAge = () => {
  // age = '18, 单倍水嫩,还是阿姨好'
  state.age = '18, 单倍水嫩,还是阿姨好'
} 
// 语法糖当中 根下面的数据和方法可以自动导出


// low 的写法
// export default {
//   setup() {
//     console.log('我是setup');
//     let message = '学vue3了'
//     const say = () => {
//       console.log('会说话,下雨会往家跑');
//     }
//     // 所有模版中需要使用的数据或者方法都得通过setup函数return出去

//     return {
//       message,
//       say
//     }
//   },
//   beforeCreate() {
//     console.log('我是beforeCreate')
//   }
// }
</script>

<template>
  <div>
    {{ message }} -- {{ message1 }}
    <button @click="say">意中人</button>
    年龄: {{ state.age }}
    <button @click="changeAge">变年轻</button>
  </div>
</template>

<style scoped>

</style>
